﻿<#include "/common/h-ui-base-css.html">
<script src="/highchart/highcharts.js"></script>
<script src="/highchart/exporting.js"></script>
<script src="/highchart/series-label.js"></script>
<script src="/highchart/oldie.js"></script>
<script src="/highchart/highcharts-zh_CN.js"></script>
<#--<script src="/highchart/sand-signika.js"></script>-->
<#--<script src="/highchart/sand.png"></script>-->

<div class="row-fluid" style="margin-top: 20px">
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-header">供应商前五</div>
            <div class="panel-body">
                <div id="container" style="max-width:800px;height:300px"></div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-danger">
            <div class="panel-header">采购商前五</div>
            <div class="panel-body">
                <div id="container1" style="max-width:800px;height:300px"></div>
            </div>
        </div>
    </div>
</div>
<div class="row-fluid" style="margin-top: 20px">
    <div class="col-xs-12 col-sm-6" style="margin-top: 10px">
        <div class="panel panel-primary">
            <div class="panel-header">日计量单数</div>
            <div class="panel-body">
                <div id="container4" style="max-width:800px;height:300px"></div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6" style="margin-top: 10px">
        <div class="panel panel-danger">
            <div class="panel-header">日进出厂量</div>
            <div class="panel-body">
                <div id="container5" style="max-width:800px;height:300px"></div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var chart = Highcharts.chart('container', {
        title: {
            text: '山西益隆供应商前五'
        },
        subtitle: {
            text: ''
        },
        yAxis: {
            title: {
                text: '总重量'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            name: '供应商A',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            name: '供应商B',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            name: '供应商C',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            name: '供应商D',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            name: '供应商E',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });

    var chart = Highcharts.chart('container1',{
        title: {
            text: '山西益隆采购商前五'
        },
        subtitle: {
            text: ''
        },
        yAxis: {
            title: {
                text: '总重量'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            name: '采购商A',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            name: '采购商B',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            name: '采购商C',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            name: '采购商D',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            name: '采购商E',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });

    var chart = Highcharts.chart('container4', {
        chart: {
            type: 'spline'
        },
        title: {
            text: '山西益隆2019日计量单数'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
        },
        yAxis: {
            title: {
                text: '单数'
            },
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: '进厂计量次数',
            marker: {
                symbol: 'square'
            },
            data: [225, 220, 180, 213, 109, 205, 101]
        }, {
            name: '出厂计量次数',
            marker: {
                symbol: 'diamond'
            },
            data: [200, 187, 178, 209, 211, 204, 195]
        }]
    });

    var chart = Highcharts.chart('container5', {
        chart: {
            type: 'spline'
        },
        title: {
            text: '山西益达2019日计量单数'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
        },
        yAxis: {
            title: {
                text: '单数'
            },
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: '进厂计量次数',
            marker: {
                symbol: 'square'
            },
            data: [110, 130, 147, 89, 99, 200, 205]
        }, {
            name: '出厂计量次数',
            marker: {
                symbol: 'diamond'
            },
            data: [ 111, 203, 222, 117, 135, 206, 196]
        }]
    });
</script>